<script setup>
import { reactive, ref, defineProps, watch } from "vue";

const props = defineProps(["tagGraph"]);
let rectModel = reactive({
  fill: "transparent",
  strokeWidth: "",
  strokeRxRy: ""
});
const lineTypeoptions = [
  {
    label: "否",
    value: "transparent"
  },
  {
    label: "是",
    value: "black"
  }
];

// 监听tagGraph的变化
watch(
  () => props.tagGraph,
  newVal => {
    if (newVal) {
      const activeObject = newVal.getActiveObject();
      if (activeObject) {
        rectModel.lineType =
          activeObject.fill == "white" ? "transparent" : "black";
        rectModel.strokeWidth = activeObject.strokeWidth / 7.5;
        rectModel.strokeRxRy = activeObject.rx;
      }
    }
  },
  {
    immediate: true
  }
);
const handleChangeRectData = ({ fill, strokeWidth, strokeRxRy }) => {
  const activeObject = props.tagGraph.getActiveObject();
  if (activeObject) {
    activeObject.set({
      strokeWidth: strokeWidth * 7.5
    });
    activeObject.set({
      fill: fill
    });
    activeObject.set({
      rx: strokeRxRy,
      ry: strokeRxRy
    });
    props.tagGraph.saveState();
    props.tagGraph.canvas.renderAll();
  }
};
</script>

<template>
  <div>
    <el-form label-position="top">
      <el-form-item label="线条宽度">
        <el-input
          v-model="rectModel.strokeWidth"
          @input="handleChangeRectData(rectModel)"
        >
          <template #append>mm</template>
        </el-input>
      </el-form-item>
      <el-form-item label="圆的半径">
        <el-input
          v-model="rectModel.strokeRxRy"
          @input="handleChangeRectData(rectModel)"
        />
      </el-form-item>
      <el-form-item label="是否填充">
        <el-select
          v-model="rectModel.fill"
          style="width: 100%"
          @change="handleChangeRectData(rectModel)"
        >
          <el-option
            v-for="(item, index) in lineTypeoptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
